{% extends 'layout.html' %}
{% load custom_filters %}
{% block title %}{{ algorithm_metrics.algorithm }}{% endblock %}
{% block content %}
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="http://43.137.4.113/public/js/echarts.min.js"></script>
<div class="row">
    <div class="col" align="center">
        <h1>{{algorithm.algorithm_name}}</h1>
    </div>
</div>
<div class="row">
    <div class="col-12" align="center">
        <table class="table table-stripped">
            <th>请求换电站数量</th>
            <th>反馈换电站数量</th>
            <th>请求摄像头数量</th>
            <th>反馈摄像头数量</th>
            <tr>
                <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/station_count">{{algorithm_metrics.station_request}}</a></td>
                <td>{{algorithm_metrics.station_result}}</td>
                <td>{{algorithm_metrics.channel_request}}</td>
                <td>{{algorithm_metrics.channel_result}}</td>
            </tr>
            <tr>
                <td>未复核</td>
                <td>无目标</td>
                <td>正常</td>
                <td>缺陷</td>
            </tr>
            <tr>
                <td>{{algorithm_metrics.unverified}}</td>
                <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/no_target/">{{algorithm_metrics.no_target}}</a></td>
                <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/normal/">{{algorithm_metrics.normal}}</a></td>
                <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/broken/">{{algorithm_metrics.broken}}</a></td>
            </tr>
        </table>
    </div>
    <div class="col-12">
        <h3><center>{{algorithm.algorithm_name}}最近7天中间结果评估指标</center></h3>
    </div>
    <div class="col-4">
        <div id="acc_intermediate" style="width: 300px;height:300px;"></div>
    </div>
    <div class="col-4">
        <div id="precision_intermediate" style="width: 300px;height:300px;"></div>
    </div>
    <div class="col-4">
        <div id="recall_intermediate" style="width: 300px;height:300px;"></div>
    </div>
    <div class="col-12">
        <h3><center>{{algorithm_metrics.algorithm.algorithm_name}}最近7天最终结果评估指标</center></h3>
    </div>
    <div class="col-4">
        <div id="acc_final" style="width: 300px;height:300px;"></div>
    </div>
    <div class="col-4">
        <div id="precision_final" style="width: 300px;height:300px;"></div>
    </div>
    <div class="col-4">
        <div id="recall_final" style="width: 300px;height:300px;"></div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('acc_intermediate'));
        // 指定图表的配置项和数据
        option_acc_intermediate = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '中间结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.acc_intermediate|get_metric}},
                    name: 'acc'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option_acc_intermediate);
        var myChart2 = echarts.init(document.getElementById('precision_intermediate'));
        // 指定图表的配置项和数据
        option_precision_intermediate = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '中间结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.precision_intermediate|get_metric}},
                    name: 'precision'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option_precision_intermediate);
        var myChart3 = echarts.init(document.getElementById('recall_intermediate'));
        // 指定图表的配置项和数据
        option_recall_intermediate = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '中间结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.recall_intermediate|get_metric}},
                    name: 'recall'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option_recall_intermediate);
        var myChart4 = echarts.init(document.getElementById('acc_final'));
        // 指定图表的配置项和数据
        option_acc_final = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '最终结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.acc_final|get_metric}},
                    name: 'acc'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option_acc_final);
        var myChart5 = echarts.init(document.getElementById('precision_final'));
        // 指定图表的配置项和数据
        option_precision_final = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '最终结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.precision_final|get_metric}},
                    name: 'precision'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart5.setOption(option_precision_final);
        var myChart6 = echarts.init(document.getElementById('recall_final'));
        // 指定图表的配置项和数据
        option_recall_final = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '最终结果',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                    value: {{algorithm_metrics.recall_final|get_metric}},
                    name: 'recall'
                    }
                ]
                }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
        myChart6.setOption(option_recall_final);
    </script>
    <div class="col-6">
        <table class="table table-striped">
            <tr>
                <th>中间结果</th>
                <th>正确(T)</th>
                <th>错误(F)</th>
                <tr>
                    <td>检出有目标(P)</td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/tp_intermediate">{{algorithm_metrics.tp_intermediate}}</a></td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/fp_intermediate">{{algorithm_metrics.fp_intermediate}}</a></td>
                </tr>
                <tr>
                    <td>检出无目标(N)</td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/tn_intermediate">{{algorithm_metrics.tn_intermediate}}</a></td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/fn_intermediate">{{algorithm_metrics.fn_intermediate}}</a></td>
                </tr>
            </tr>
        </table>
    </div>
    <div class="col-6">
        <table class="table table-striped">
            <tr>
                <th>最终结果</th>
                <th>正确(T)</th>
                <th>错误(F)</th>
                <tr>
                    <td>检出有缺陷(P)</td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/tp_final">{{algorithm_metrics.tp_final}}</a></td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/fp_final">{{algorithm_metrics.fp_final}}</a></td>
                </tr>
                <tr>
                    <td>检出无缺陷(N)</td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/tn_final">{{algorithm_metrics.tn_final}}</a></td>
                    <td><a href="/inspect_request_query/{{algorithm.algorithm_topic}}/fn_final">{{algorithm_metrics.fn_final}}</a></td>
                </tr>
            </tr>
        </table>
    </div>
    <div class="col-4">
        $$acc(准确率)=\frac{TP+TN}{TP+TN+FP+FN}$$
    </div>
    <div class="col-4">
        $$precision(查准率)=\frac{TP}{TP+FP}$$
    </div>
    <div class="col-4">
        $$recall(查全率)=\frac{TP}{TP+FN}$$
    </div>
</div>
{% endblock %}